<!--考核项详情-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>招聘二维码</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <!--        <div id="qrcode" v-if="ImgHttp"></div>-->
        <!--        <div class="erroText" v-else>-->
        <!--          <p>未设置域名无法生成二维码</p>-->
        <!--        </div>-->
        <div class="previewlogBody"
             v-loading="codeloading"
             element-loading-text="拼命加载中"
             element-loading-spinner="el-icon-loading"
             element-loading-background="rgba(0, 0, 0, 0.6)">
          <div class="applycode savebox" ref="imageDom">
            <img src="@/assets/imageAdmin/applycode.jpg" alt="" class="saveimgBg">
            <div class="apply-code-title">
              <p class="title-top">招贤纳士</p>
              <div class="title-body">
                <p class="title-name title-list">招聘单位：{{schoolname}}</p>
                <p class="title-name title-list">职位：{{qrcideOption.job.name}}</p>
                <p class="title-name title-list">发布时间：{{qrcideOption.update_time}}</p>
              </div>
              <div class="apply-code-img" v-if="ImgHttp">
                <div id="qrcode"></div>
              </div>
              <div class="erroText apply-code-img" v-else>
                <p>未设置域名无法生成二维码</p>
              </div>
              <p class="getcode">扫码进入</p>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="mini">返回</el-button>
        <el-button @click="getImages" size="mini" type="primary">下载二维码</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import html2canvas from "html2canvas";

export default {
  props: ['visible', 'qrcideOption'],
  components: {},
  data() {
    return {
      dialogVisible: false,
      codeloading: true,
      schoolname: '',
      loadingDown: ''
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        this.getSettingFn()
      } else {
        this.codeloading = true
      }
    }
  },
  created() {
  },
  methods: {
    getSettingFn () {
      let that = this;
      this.$fetch(this.api.system_setting, {}).then(res => {
        if (res.code === 0) {
          that.schoolname = res.vo.name
          that.ImgHttp = res.vo.url
          if (res.vo.url) {
            that.$nextTick(function () {
              that.qrcode()
            })
          }
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 生成二维码
    qrcode() {
      let that = this
      let qrcode = new QRCode('qrcode', {
        width: 160,
        height: 160, // 高度
        text: `${that.$BASE_URL}/program/#/job?id=${this.qrcideOption.id}`,// 二维码内容
      })
      this.codeloading = false
    },
    html2canvasFn () {
      let self_ = this
      let opts = {
        useCORS: true
      }
      this.loadingDown = this.$loading({
        lock: true,
        text: '生成中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      html2canvas(self_.$refs.imageDom, opts).then(canvas => {
        let image = new Image()
        image.onload = function () {
          self_.imgUrl = canvas.toDataURL('image/png')
          self_.downloadIamge ()
        }
        image.src = canvas.toDataURL('image/png')
      })
    },
    getImages(){
      this.html2canvasFn()
    },
    // 下载二维码
    downloadIamge () { // 下载图片地址和图片名
      let image = new Image()// 解决跨域 Canvas 污染问题
      let this_ = this
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = function () {
        let canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        let context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height)
        let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据

        let a = document.createElement('a') // 生成一个a元素
        let event = new MouseEvent('click') // 创建一个单击事件
        // this.infoForm.title
        // 'codetype', // codetype: 1, // 1 通知 2 问卷
        let title = `招聘信息-${this_.qrcideOption.job.name}`
        this_.loadingDown.close()
        a.download = title || 'photo' // 设置图片名称
        a.href = url // 将生成的URL设置为a.href属性
        a.dispatchEvent(event) // 触发a的单击事件
      }
      image.src = this.imgUrl
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  /*width: 40%;*/
  /*height: 50%;*/
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.erroText {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
}



.saveimgBg {
  width: 100%;
  display: block;
}

.primaryBtn {
  padding: 20px 0;
}



.title-top {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  padding: 30px 0;
  color: #000;
}

.title-body {
  padding: 0 20px;

}

.title-list {
  font-size: 18px;
  margin-bottom: 5px;
  color: #000;
}

.apply-code-img img {
  width: 160px;
  height: 160px;
  margin: 60px auto 10px;
  display: block;
}

.getcode {
  width: 100%;
  text-align: center;
}
</style>


